

<style>
    .layui-input{width: 266px; height: 30px; padding:0 10px;}
    .input-group-addon{background-color:#fff; width: 33px; height: 30px;border-radius: 0; }
    .box-body h2{margin-top: 0;}
    .box-body .spacing{ display: block;height: 50px;}
    .box-body .rate-caret-up{color:#00A950;}
    .box-body .rate-caret-down{color:#F04844;}
</style>

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">订单统计</h3>
        <div class="box-tools pull-right">

            <div class="btn-group pull-right" style="margin-right: 10px">
                <input type="text" class="layui-input pull-right" id="order_time" placeholder="自定义时间" lay-key="17">
                <div class="input-group-addon pull-right" style="border: 1px solid #ccc;border-right: 0;">
                    <i class="fa fa-calendar"></i>
                </div>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default order_days"  data-type="3" title="本月">
                    <span class="hidden-xs">本月</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-success order_days"  data-type="2" title="本周">
                    <span class="hidden-xs">本周</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm order_days btn-default" data-type="1" title="今日">
                    <span class="hidden-xs">今日</span>
                </a>
            </div>
        </div>
    </div>
    <div class="box-body" style="display: block;">
        <div class="col-md-2">
            <span>本月订单总数</span>
            <h2>{{$order_data['curr_month_count']}}</h2>
            <span>
                <span class="rate-{{$order_data['month_type']}}">
                    <i class="fa fa-{{$order_data['month_type']}}"></i>
                    {{$order_data['month_rate'].'%'}}
                </span>
                同比上月
            </span>
            <div class="spacing"></div>
            <span>本周订单数量</span>
            <h2>{{$order_data['curr_week_count']}}</h2>
            <span>
                <span class="rate-{{$order_data['week_type']}}">
                    <i class="fa fa-{{$order_data['week_type']}}"></i>
                    {{$order_data['week_rate'].'%'}}
                </span>
                同比上周
            </span>
        </div>

        <div class="col-md-10">
            <div id="order_main" style="height:400px;"></div>
        </div>
    </div>
</div>

<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">兑换统计</h3>
        <div class="box-tools pull-right">
            <div class="btn-group pull-right" style="margin-right: 10px">
                <input type="text" class="layui-input pull-right" id="exchange_time" placeholder="自定义时间" lay-key="18">
                <div class="input-group-addon pull-right" style="border: 1px solid #ccc;border-right: 0;">
                    <i class="fa fa-calendar"></i>
                </div>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-default exchange_days"  data-type="3" title="本月">
                    <span class="hidden-xs">本月</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm btn-success exchange_days"  data-type="2" title="本周">
                    <span class="hidden-xs">本周</span>
                </a>
            </div>
            <div class="btn-group pull-right" style="margin-right: 10px">
                <a href="javascript:;" class="btn btn-sm exchange_days btn-default" data-type="1" title="今日">
                    <span class="hidden-xs">今日</span>
                </a>
            </div>
        </div>
    </div>
    <div class="box-body" style="display: block;">
        <div class="col-md-2">
            <span>本月销售总额</span>
            <h2>{{$exchange_data['curr_month_count']}}</h2>
            <span>
                <span class="rate-{{$exchange_data['month_type']}}">
                    <i class="fa fa-{{$exchange_data['month_type']}}"></i>
                    {{$exchange_data['month_rate'].'%'}}
                </span>
                同比上月
            </span>
            <div class="spacing"></div>
            <span>本周销售总额</span>
            <h2>{{$exchange_data['curr_week_count']}}</h2>
            <span>
                <span class="rate-{{$exchange_data['week_type']}}">
                    <i class="fa fa-{{$exchange_data['week_type']}}"></i>
                    {{$exchange_data['week_rate'].'%'}}
                </span>
                同比上周
            </span>
        </div>

        <div class="col-md-10">
            <div id="exchange_main" style="height:400px;"></div>
        </div>
    </div>
</div>


<script>

    $(function () {
        function dates(time){
            var year = time.year;
            var month = time.month;
            var date = time.date;
            var hours = time.hours;
            var minutes = time.minutes;
            var seconds = time.seconds;
            if(month < 10){
                month = "0" + month;
            }
            if(date < 10){
                date = "0" + date;
            }
            if(hours < 10){
                hours = "0" + hours;
            }
            if(minutes < 10){
                minutes = "0" + minutes;
            }
            if(seconds < 10){
                seconds = "0" + seconds;
            }

            return year+"-"+month+"-"+date+" "+hours+":"+minutes+":"+seconds;
        }

        var order_start_time = '';
        var order_end_time = '';
        var order_days_type = 2;
        laydate.render({
            elem: '#order_time',
            type: 'datetime',
            range: true,
            btns: ['clear', 'confirm'],
            done: function(value, date, endDate){
                order_start_time = dates(date);
                order_end_time = dates(endDate);

                order_days_type = 0;
                initOrderCharts();

                $('.order_days.btn-success').addClass('btn-default');
                $('.order_days.btn-success').removeClass('btn-success');
            }
        });
        $('.order_days').click(function () {
            $('.order_days.btn-success').addClass('btn-default');
            $('.order_days.btn-success').removeClass('btn-success');
            if ($(this).hasClass('btn-default')){
                $(this).removeClass('btn-default');
            }
            $(this).addClass('btn-success');

            $('#order_time').val('');

            order_days_type = $(this).data('type');
            initOrderCharts();
        });
        var orderChart = echarts.init(document.getElementById('order_main'));
        initOrderCharts();
        function initOrderCharts() {
            orderChart.showLoading();
            $.get('/api/getOrderData',{'days_type':order_days_type,'start_time':order_start_time,'end_time':order_end_time}).done(function (r) {
                orderChart.hideLoading();
                option = {
                    title: {
                        left: 'center',
                        text: r.title + '订单统计',
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: r.xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: r.series,
                        type: 'line',
                        smooth: true,
                        itemStyle : { normal: {label : {show: true}}},
                        lineStyle : {
                            color: 'rgb(255, 99, 132)',
                        },
                        areaStyle: {
                            color: 'rgb(54, 162, 235)',
                        }
                    }]
                };
                orderChart.setOption(option);
            });
        }



        /*兑换统计*/
        var exchange_start_time = '';
        var exchange_end_time = '';
        var exchange_days_type = 2;
        laydate.render({
            elem: '#exchange_time',
            type: 'datetime',
            range: true,
            btns: ['clear', 'confirm'],
            done: function(value, date, endDate){
                exchange_start_time = dates(date);
                exchange_end_time = dates(endDate);
                exchange_days_type = 0;
                initExchangeCharts();

                $('.exchange_days.btn-success').addClass('btn-default');
                $('.exchange_days.btn-success').removeClass('btn-success');
            }
        });
        $('.exchange_days').click(function () {
            $('.exchange_days.btn-success').addClass('btn-default');
            $('.exchange_days.btn-success').removeClass('btn-success');
            if ($(this).hasClass('btn-default')){
                $(this).removeClass('btn-default');
            }
            $(this).addClass('btn-success');
            $('#exchange_time').val('');
            exchange_days_type = $(this).data('type');
            initExchangeCharts();
        });
        var exchangeChart = echarts.init(document.getElementById('exchange_main'));
        initExchangeCharts();
        function initExchangeCharts() {
            exchangeChart.showLoading();
            $.get('/api/getExchangeData',{'days_type':exchange_days_type,'start_time':exchange_start_time,'end_time':exchange_end_time}).done(function (r) {
                exchangeChart.hideLoading();
                option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: r.xAxis
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: r.series,
                        type: 'line',
                        smooth: true,
                        itemStyle : { normal: {label : {show: true}}},
                        lineStyle : {
                            color: 'rgb(255, 99, 132)',
                        },
                        areaStyle: {
                            color: 'rgb(54, 162, 235)',
                        }
                    }]
                };

                exchangeChart.setOption(option);
            });
        }


    });


</script>